.in-container{
    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:-ms-flexbox; /* Internet Explorer 10 */
    display:box;
    width: 100%;
}
.in-row {
    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:-ms-flexbox; /* Internet Explorer 10 */
    display:box;
    width: 100%;
}
.in-column {
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
    width: 100%;
}
.in-col-1, .in-col-2, .in-col-3, .in-col-4, .in-col-5, .in-col-6 {
    width: 100%;
}
.in-col-1 {
    -webkit-box-flex: 1.0; 
    -webkit-flex: 1.0;
    -moz-box-flex:1.0; /* Firefox */
}
.in-col-2 {
    -webkit-box-flex: 2.0; 
    -webkit-flex: 2.0;
    -moz-box-flex:2.0; /* Firefox */
}
.in-col-3 {
    -webkit-box-flex: 3.0; 
    -webkit-flex: 3.0;
    -moz-box-flex:3.0; /* Firefox */
}
.in-col-4 {
    -webkit-box-flex: 4.0; 
    -webkit-flex: 4.0;
    -moz-box-flex:4.0; /* Firefox */
}
.in-col-5 {
    -webkit-box-flex: 5.0; 
    -webkit-flex: 5.0;
    -moz-box-flex:5.0; /* Firefox */
}
.in-col-6 {
    -webkit-box-flex: 6.0; 
    -webkit-flex: 6.0;
    -moz-box-flex:6.0; /* Firefox */
}
/* 
 * 传统的方法
*/
.atlas {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

.atlas-all {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

.line {
  margin-right: -15px;
  margin-left: -15px; }

.atl-all,.atl-half,.atl-third,.atl-1,.atl-2,.atl-3,.atl-4,.atl-5,.atl-6,.atl-left-1,.atl-left-2,.atl-left-3,.atl-left-4,.atl-left-5,.atl-left-6 {
  position: relative;
  min-height: 1px; }

.atl-all {
width: 100%;
float: left; }

.atl-half {
width: 50%;
float: left; }

.atl-third {
width: 33.33333%;
float: left; }

.atl-1 {
width: 16.66666%;
float: left; }

.atl-2 {
width: 33.33333%;
float: left; }

.atl-3 {
width: 50%;
float: left; }

.atl-4 {
width: 66.66667%;
float: left; }

.atl-5 {
width: 83.33333%;
float: left; }

.atl-6 {
width: 100%;
float: left; }

.atl-left-0{
left: auto; }

.atl-left-1 {
left: 16.66666%; }

.atl-left-2 {
left: 33.33333%; }

.atl-left-3 {
left: 50.0%; }

.atl-left-4 {
left: 66.66667%; }

.atl-left-5 {
left: 83.33333%; }

.atl-left-6 {
left: 100.0%; }

.atl-right-1 {
right: 0; }

.atl-right-0 {
right: auto; }

.atl-right-1 {
right: 16.66667%; }

.atl-right-2 {
right: 33.33333%; }

.atl-right-3 {
right: 50%; }

.atl-right-4 {
right: 66.66667%; }

.atl-right-5 {
right: 83.33333%; }

.atl-right-6 {
right: 100%; }

.atlas:before,
.atlas:after,
.atlas-all:before,
.atlas-all:after,
.line:before,
.line:after{
  display: table;
  content: " ";
}
.atlas:after,
.atlas-all:after,
.line:after{
  clear: both;
}